<template>
    <div class="default__main">
        <div class="default__main--scroll">
            <div class="default__main__container">
                <router-link :to="{path:'/list'}">简历列表</router-link>
                1111 {{$t('text')}}
                <el-button type="primary" @click="setLanguage">默认按钮</el-button>
                <div class="clearfix form-main">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="即时配送">
                            <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
                        </el-form-item>
                        <el-form-item label="活动性质">
                            <el-checkbox-group v-model="form.type">
                                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                <el-checkbox label="地推活动" name="type"></el-checkbox>
                                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="特殊资源">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="线上品牌商赞助"></el-radio>
                                <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="活动形式">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <input v-model="ceshi"></input>
                    <div>{{ceshi2}}</div>
                </div>
                <div>
                    <div @click="showImageUpload = true">上传</div>
                    <image-file  @close="showImageUpload=false" @uploadComfirm="uploadComfirm" :show="showImageUpload" :value="url"></image-file>
                </div>
                <img :src="url!=''?'http://pic.yy5b.com/'+url:''" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    import { saveHeaderImage } from 'api'
    export default {
        data() {
            return {
                ceshi:"胡种种傻不傻",
                input_pick_data: ['name', 'mobile', 'email'],
                input_old_data: null,
                input_data: null,
                ignore_input_data: ['name'],
                goPath: null,
                showModal: false,
                str: "",
                loading: true,
                showImageUpload:false,
                url:"",
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: this.$t('text'), trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        computed:{
            ceshi2(){
                return this.ceshi+"很傻"
            }
        },
        mounted() {
            let vm = this;
        },
        methods: {

            fetchJS() {
                console.log(123);

            },
            change(str){
                this.url = str;
            },
            uploadComfirm(str){
                this.showImageUpload = false;
                if(str==''){
                    return false;
                }
                this.$promise.post(saveHeaderImage,{
                    data:str
                }).then(resp=>{
                    this.url = resp.data.imageUrl
                })
            },
            onSubmit() {
                console.log(this.form);
            },
            setLanguage() {
                this.setI18n('en');
            }
        }
    }
</script>
<style lang="scss" scoped>
    .ceshi_bg {
        width: 200px;
        height: 200px;
        background-image: url('../images/common/top.jpg');
    }
    .cropper-main{
        position: fixed;
        width:300px;
        height: 300px;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        img{
            width:auto;
            height:auto;
            max-width:100%;
            max-height:100%;
        }
    }
    .form-main {
        .line {
            text-align: center;
        }
    }
</style>
